<template>
    <a-tree-select
      v-if="tree"
      allowClear
      labelInValue
      tree-data-simple-mode
      :getPopupContainer="(node) => node.parentNode"
      style="width: 100%"
      :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="请选择区域"
      :loadData="loadData"
      :value="selectedValue"
      :treeData="treeData"
      @change="onChange">
    </a-tree-select>
    <a-select
      v-else
      allowClear
      placeholder="请选择区域"
      :value="selectedValue"
      :options="options"
      @change="onChange"
    >
    </a-select>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { httpAction, getAction } from '@/api/manage';

  export default {
      name: "partSelect",
      props: ["value"],
      model: {
        prop: 'value',
        event: 'change'
      },
      data(){
        return {
          selectedValue:undefined,
          treeData:[],
          options:[],
          tree:true,
          url: {
            queryChildrenDepartList: "/sys/sysDepart/queryChildrenDepartList"
          }
        }
      },
      computed:{
        ...mapGetters(["userInfo"])
      },
      mounted() {
        this.loadData(null,this.userInfo.orgCode);
      },
      methods:{
        onChange(value){
          this.selectedValue = value
          if(!value){
            this.$emit('change', '');
            this.selectedValue = null
          } else if (value instanceof Array) {
            this.$emit('change', value.map(item => item.value).join(','))
          } else if(value instanceof Object){
            this.$emit('change', value.value,value.label)
          } else {
            this.$emit('change', value)
          }
        },
        loadData(treeNode,orgCode){
          return new Promise(resolve => {
            if(!orgCode)orgCode = treeNode.dataRef.value;
            getAction(this.url.queryChildrenDepartList, {orgCode:orgCode}).then((res) => {
              if (res.success) {
                if (res.result && res.result.length > 0) {
                  if(!treeNode && res.result[0]["orgCategory"] == 3){//首次加载是组，则使用a-select组件
                    this.tree = false;
                    res.result.forEach(i=>{
                      this.options.push({
                        value: i["orgCode"],
                        label: i["departName"],
                      })
                    });
                  }else{
                    res.result.forEach(i=>{
                      this.treeData.push({
                        id: i["id"],
                        pId: i["parentId"],
                        value: i["orgCode"],
                        title: i["departName"],
                        isLeaf: (i["orgCategory"] == 3)
                      });
                    });
                  }
                }
              }else{
                that.$message.warning(res.message);
              }
              resolve();
            });
          });
        }
      }
  }
</script>

<style scoped>

</style>